<template>
<div>
    <div class="intro">
      <h2>剧情简介</h2>
      <p>{{detail.dra}}</p>
    </div>
    <div class="intro">
      <h2>导演</h2>
      <p>{{detail.dir}}</p>
    </div>
  <div class="intro">
    <h2>主要演员</h2>
    <p>{{detail.star}}</p>
  </div>
  <div class="intro">
    <h2>预告片</h2>
    <div class="intro">
      <h1>{{detail.videoName}}</h1>
    </div>
    <video class="intro_video" controls :poster="detail.videoImg" @click="toVideo"></video>
  </div>
  <div class="intro">
      <h2>图集<span class="tophoto" @click="toPhoto">全部<i class="el-icon-arrow-right"></i> </span></h2>
    <photos :photos="photos"></photos>
  </div>
  <div class="intro">
    <h2>热评<span class="tophoto" @click="toCom">全部评论({{comment.total}})<i class="el-icon-arrow-right"></i> </span></h2>
<comcard :comment="comment.hcmts"></comcard>
  </div>
  <comdrawer :show="showDrawer" @showDrawer="toCom" :allComment="comment.cmts"></comdrawer>
</div>
</template>

<script>
import Photos from "./photos";
import Comdrawer from "../../../components/comdrawer";
import Comcard from "../../../components/Comcard";
import {mapState} from "vuex";
export default {
  name: "introduce",
  components: {Comcard, Comdrawer, Photos},
  data(){
    return{
      showDrawer:false,
      id:this.detail.id
    }
  },
  props:{
    detail: {type:Object,required:true},
    photos: {type:Array ,required:true}
  },
  computed:{...mapState({
      comment: state=>state.movie.movComment
    })},
  beforeCreate() {
    this.$store.dispatch('movie/movComment',this.$route.params.id)
  },
  methods:{
    toPhoto(){
      this.$emit('dochange','third')
    },
    toVideo(){
      this.$emit('dochange','second')
    },
    toCom(){
      this.showDrawer=!this.showDrawer
    }
  }
}
</script>

<style scoped>
.intro h2::before {
  float: left;
  content: "";
  display: inline-block;
  width: 6px;
  height: 18px;
  margin-right: 6px;
  background-color: #5eabc7;
}
.intro h2{
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
}
.intro p{
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 2px;
}
.tophoto{
color: gray;
  float: right;
  margin-right: 10px;
}
</style>
